<template>
  <el-table :data="permissionArr" row-key="id">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="code" label="权限值" />
    <el-table-column prop="updateTime" label="修改时间" />
    <el-table-column prop="address" label="Options">
      <template #="{ row, $index }">
        <el-button
          type="primary"
          icon="CirclePlus"
          @click="addPermission(row)"
          size="small"
          :disabled="row.level == 4 ? true : false"
        ></el-button>
        <el-button
          type="primary"
          icon="Edit"
          @click="updatePermisstion(row)"
          size="small"
        ></el-button>
        <el-popconfirm
          :title="`你确定要删除${row.name}?`"
          width="260px"
          @confirm="removeMenu(row.id)"
        >
          <template #reference>
            <el-button type="primary" size="small" icon="delete"></el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加/修改弹窗 -->
  <el-dialog
    v-model="dialogFormVisible"
    :title="permissionParams.id ? '编辑菜单' : '添加菜单'"
    width="500"
  >
    <el-form :model="permissionParams" style="width: 70%; margin: 10px auto">
      <el-form-item label="名称">
        <el-input v-model="permissionParams.name" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="权限">
        <el-input v-model="permissionParams.code" placeholder="Please input" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import {
  reqGetPermission,
  reqAddOrUpdateMenu,
  reqDeleteMenu,
} from '../../../api/acl/menu'
import { ref, reactive, onMounted } from 'vue'
/* data */
let permissionArr = ref([])
let permissionParams = reactive({
  id: null,
  name: '',
  code: '',
})
let dialogFormVisible = ref<boolean>(false)
/* methods */

/* func:获取菜单 */
const getList = async () => {
  let res = await reqGetPermission()
  permissionArr.value = res.data
}

/* click: 添加菜单 */
const addPermission = (row) => {
  Object.assign(permissionParams, {
    id: null,
    name: '',
    code: '',
  })
  dialogFormVisible.value = true
}

/* click: 编辑菜单 */
const updatePermisstion = (row) => {
  Object.assign(permissionParams, row)
  dialogFormVisible.value = true
}

/* click: 删除菜单 */
const removeMenu = async (id) => {
  let res = await reqDeleteMenu(id)
  await getList()
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: res.data,
    })
  }
}
/* func: 发送添加/修改请求 */
const addOrUpdateMenu = async () => {
  let data = permissionParams
  let res = await reqAddOrUpdateMenu(data)
  await getList()
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: permissionParams.id ? '修改成功' : '添加成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: res.data,
    })
  }
}

/* click: 弹窗确认 */
const handleConfirm = () => {
  addOrUpdateMenu()
  dialogFormVisible.value = false
}

/* lifeCircle */
onMounted(() => {
  getList()
})
</script>

<style scoped></style>
